<template>
    <div class="wrapper">
        <div class="showtip" v-if="showTips">暂无数据！</div>
        <div class="rank">
            <ul
                    v-infinite-scroll="loadMore"
                    infinite-scroll-disabled="loading"
                    infinite-scroll-distance="20">
                <li v-for="(item, index) in rankList" :key="item.index">
                    <span>{{index+1}}</span>
                    <span><img v-lazy="item.imgurl" alt=""></span>
                    <span>{{ item.nickname}}</span>
                    <span>{{item.relay_count}}条</span>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
    import Vue from "vue";
    import request from "@/utils/request";
    import { InfiniteScroll } from 'mint-ui';
    Vue.use(InfiniteScroll);
    import * as config from "./config";
    export default {
        data(){
            return {
                loading: true,
                offset:0,
                showTips: false,
                rankList:[],
                pageSize: 10,
                pageIndex: 1
            }
        },
        methods:{
            loadMore() {
                this.loadData();
            },
            loadData() {
                const _self = this;
                _self.loading = true;
                request
                    .get(this.global.API_URL, {
                        action: "/activity/relay/RelayAction/getRankList",
                        requestParam: {
                            actcode: config.ACT_CODE,
                            isall: 0,
                            offset: _self.pageIndex * _self.pageSize - _self.pageSize,
                            size: _self.pageSize

                        }
                    })
                    .then(response => {
                        _self.loading = false;
                        _self.pageIndex++;
                        if(response.obj.total <= 0){
                            _self.showTips = true
                            _self.loading = true;
                        }else {
                            _self.showTips = false;
                            _self.loading = false;
                            _self.rankList = _self.rankList.concat(response.obj.list);
                            if (_self.rankList.length >= response.obj.total) {
                                //无更多数据
                                _self.loading = true;
                            }
                        }
                    });
            }
        },
        mounted(){
            this.loadData();
        }
    }
</script>
<style lang="stylus" scoped>
    @import '~@/assets/styles/mixins.styl';
    .wrapper {
        position absolute
        top: 0
        left: 0
        bottom: 0
        right: 0
        background-color #b80000
    }
    .rank{
        margin: 0 auto;
        width: 90%
        padding-top 1.3rem
    }
    .showtip{
        width: 100%
        padding-top 1rem
        line-height .5rem
        color #ffffff
        text-align center
        font-size .32rem
        height .5rem
    }
    .rank>ul{
        width: 100%
        height .6rem
    }
    .rank>ul>li{
        display flex
        border-bottom 1px solid #cacaca
    }
    .rank>ul>li>span{
        height 1.4rem
        text-align center
        line-height 1.4rem
    }
    .rank>ul>li>span:nth-child(1){
        flex .5
        color #feca00
    }
    .rank>ul>li>span:nth-child(2){
        flex 1
    }
    .rank>ul>li>span:nth-child(3){
        flex 1.5
        color #fff
        font-size .32rem
    }
    .rank>ul>li>span:nth-child(4){
        flex 1
        color #feca00
        font-size .36rem
    }
    .rank>ul>li>span>img{
        width: 1rem
        height 1rem
        border-radius 50%
        border 3px solid #feca00
    }
</style>